<template>
	<view class="center-form">
		<view v-show="inputPhone">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uFormPhone">
				<u-form-item :leftIcon="accountNumberIcon" prop="phone" borderBottom ref="item1">
					<u--input v-model="userInfo.phone" border="none" placeholder="请输入手机号码"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-transition :show="!inputPhone" mode="slide-up">
			<view class="phone-title" @click="inputPhone = !inputPhone">
				<view class="">
					<text class="phone-title-text">手机号:</text>
					{{ userInfo.phone }}
				</view>
				<u-icon name="close-circle-fill" size="14"></u-icon>
			</view>
			<view class="code-input"><u-code-input @finish="loginFunc" v-model="userInfo.phoneCode"></u-code-input></view>
		</u-transition>
		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
		<view class="radio-box">
			<u-radio-group v-model="isChange" @change="changeAgm">
				<u-radio :labelDisabled="true" shape="square" name="change" />
				同意智铺管理端
				<text @click="jumpPageAgreement(2)" style="color: #0033ff">《用户协议》</text>
				和
				<text @click="jumpPageAgreement(1)" style="color: #0033ff">《隐私政策》</text>
			</u-radio-group>
		</view>
		<u-button @tap="getCode" :text="tips" type="primary" shape="circle" :disabled="disabled1"></u-button>
		<view class="other-login" @click="otherLogin">
			微信一键登录
			<u-icon name="arrow-right" size="14"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputPhone: true, // 输入框切换的状态
			accountNumberIcon: '/static/image/login/icon-zhanghao.png',
			passwordIcon: '/static/image/login/icon-mima.png',
			userInfo: {
				phone: '17688311404',
				phoneCode: ''
			},
			tips: '',
			seconds: 10,
			isChange: false, // 是否选中协议
			disabled1: false,
			sumbitBtnCss: {
				// 提交按钮的样式
				background: 'linear-gradient(270deg, rgba(47, 176, 252, 0.5) 0%, #0033FF 100%)',
				opacity: '0.5',
				color: '#fff'
			},
			rules: {
				phone: {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	methods: {
		// 跳转到协议页  url  协议地址
		jumpPageAgreement(id) {
			uni.navigateTo({
				url: '/packMyself/agreement/agreement?id=' + id
			});
		},
		// 同意协议
		changeAgm() {
			this.sumbitBtnCss = {
				// 提交按钮的样式
				background: 'linear-gradient(270deg, rgba(47, 176, 252, 0.5) 0%, #0033FF 100%)',
				opacity: '1',
				color: '#fff'
			};
		},
		codeChange(text) {
			this.tips = text;
		},
		// 登录
		async loginFunc() {
			if (!this.isChange) return uni.$u.toast('请先阅读并同意协议');
			await this.$refs.uFormPhone.validate();
			const { phone, phoneCode } = this.userInfo;
			const params = {
				type: 2,
				phone,
				phoneCode
			};
			this.$emit('change', params);
		},
		// 发送短信验证码
		async getCode() {
			await this.$refs.uFormPhone.validate();
			if (this.$refs.uCode.canGetCode) {
				const { phone } = this.userInfo;
				if (!this.isChange) return uni.$u.toast('请先阅读并同意协议');
				uni.showLoading({
					title: '正在获取验证码'
				});

				const res = await this.$api.thirdParty.sendShort({
					phone: this.userInfo.phone
				});
				if (res.code === 200) {
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					this.inputPhone = false;
				}
				uni.hideLoading();
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		otherLogin() {
			this.$emit('otherLogin', 2);
		}
	}
};
</script>

<style lang="scss" scoped>
.center-form {
	background: rgba(255, 255, 255, 0.39);
	box-shadow: 0px 0px 20px rgba(42, 122, 255, 0.2);
	border: 1px #fff solid;
	margin: 50rpx 40rpx 0;
	border-radius: 5px;
	padding: 44rpx 40rpx 60rpx;

	.u-form-item__body {
		padding: 30rpx 0;
	}
}
.code-input {
	display: flex;
	justify-content: center;
}
.phone-title {
	padding: 0rpx 0 40rpx;
	display: flex;
	justify-content: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	.phone-title-text {
		font-size: 20rpx;
		color: #999;
	}
}

.radio-box {
	margin: 35rpx 0 72rpx;
	color: #999;
	font-size: 24rpx;
	display: flex;
}

.other-login {
	display: flex;
	justify-content: flex-end;
	margin-top: 60rpx;
	font-size: 24rpx;
	color: #999;
	text-align: right;
}
</style>
